<template>
  <div class="checkActivity">
    <!-- 添加活动的弹框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="40%">
      <el-form :model="formEdit" :rules="rules" ref="formEdit">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formEdit.name" autocomplete="off" maxlength="300" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="活动时间" :label-width="formLabelWidth" prop="beginTime">
          <el-date-picker
            v-model="formEdit.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="举办地点" :label-width="formLabelWidth" prop="address">
          <el-input v-model="formEdit.address" autocomplete="off" maxlength="300" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="主办方" :label-width="formLabelWidth" prop="sponsor">
          <el-input v-model="formEdit.sponsor" autocomplete="off" maxlength="300" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contractTel">
          <el-input
            v-model="formEdit.contractTel"
            autocomplete="off"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth" prop="contracts">
          <el-input v-model="formEdit.contracts" autocomplete="off" maxlength="60" show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item label="最多可报名人数" :label-width="formLabelWidth" prop="maxApplyNum">
					<el-input v-model="form.maxApplyNum" autocomplete="off" type="number" show-word-limit></el-input>
        </el-form-item>-->
        <el-form-item label="筛查项目" :label-width="formLabelWidth" prop="maxApplyNum">
          <el-select
            v-model="formEdit.projects"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入筛查项目,每输入完一个按下enter"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动介绍" :label-width="formLabelWidth" prop="memo">
          <el-input
            v-model="formEdit.memo"
            type="textarea"
            :rows="3"
            autocomplete="off"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="活动海报图片" :label-width="formLabelWidth" prop="imageUrl">
          <singleImgUpload :url.sync="formEdit.imageUrl" dir="checkActivityImg"></singleImgUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel()">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit()">{{ dialog.title }}</el-button>
      </div>
    </el-dialog>
    <!-- 查看活动效益的弹框 -->
    <!-- <div class="asctive">
      <el-dialog title="报名列表" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="姓名" width="150"></el-table-column>
          <el-table-column property="name" label="性别" width="100"></el-table-column>
          <el-table-column property="date" label="联系电话" width="150"></el-table-column>
          <el-table-column property="name" label="是否筛查" width="100"></el-table-column>
          <el-table-column property="date" label="是否注册" width="150"></el-table-column>
          <el-table-column property="name" label="是否购买" width="100"></el-table-column>
        </el-table>
        <el-pagination
          class="resultPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </el-dialog>
    </div>-->

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-head">
            <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
              <el-form-item label="名字" prop="name">
                <el-input placeholder="名字" v-model="queryParam.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                <el-button @click="resetForm('queryParam')">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="addDialog">添加</el-button>
              </el-form-item>
            </el-form>
            <!-- <el-form :inline="true" label-width="100px" class="demo-ruleForm">
              <el-form-item label="名字" prop="name">
                <el-input placeholder="名字" v-model="page.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getList()">搜索</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addDialog"
                  style="margin: 10px 0;"
                >添加</el-button>
              </el-form-item>
            </el-form>-->
          </div>
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%;"
              row-key="id"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column label="活动名称" width="180" prop="name"></el-table-column>
              <el-table-column label="活动开始时间" width="180" prop="beginTime"></el-table-column>
              <el-table-column label="结束时间" width="180" prop="endTime"></el-table-column>
              <el-table-column label="举办地点" width="180" prop="address"></el-table-column>
              <el-table-column label="主办方" width="180" prop="sponsor"></el-table-column>
              <el-table-column label="联系电话" width="180" prop="contractTel"></el-table-column>
              <el-table-column label="联系人" width="150" prop="contracts"></el-table-column>
              <el-table-column label="报名人数" width="100" prop="applyNum"></el-table-column>
              <!-- <el-table-column label="最多可报名人数" width="180" prop="maxApplyNum"></el-table-column> -->
              <el-table-column label="状态" width="100">
                <template slot-scope="scope">{{ getStatusName(scope.row.status) }}</template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="240">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="updateDialog(scope.row)">修改</el-button>
                  <el-button
                    @click="publish(scope.row)"
                    type="text"
                    size="small"
                  >{{ scope.row.status == '2' || scope.row.status == '3' ? '下架' : '发布' }}</el-button>
                  <!-- <a
                    :href="scope.row.qrCode"
                    target="_blank"
                    style="color: #24BCB8;text-decoration: none;margin: 0 10px;"
                  >小程序码</a>-->
                  <el-button type="text" size="small" @click="miniCode(scope.row)">小程序码</el-button>
                  <el-button @click="checkApplyList(scope.row.id)" type="text" size="small">报名列表</el-button>
                  <!-- <el-button @click="customerList(scope.row.id)" type="text" size="small">注册列表</el-button> -->
                  <el-button type="text" size="small" @click="recommenderDialog(scope.row)">注册列表</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <a :href="miniCodeUrl" id="miniCodeUrl_store" target="_blank" style="display:none;"></a>
    <checkApplyList v-bind:id="id" v-bind:visible.sync="checkApplyDialog"></checkApplyList>
    <!-- <checkCustomerList v-bind:id="id" v-bind:visible.sync="customerDialog"></checkCustomerList> -->
    <recommender v-bind:visible.sync="recommenderVisable" ref="recommender"></recommender>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import singleImgUpload from "@/components/upload/SingleImgUpload.vue";
import checkApplyList from "@/views/checkManager/checkApplyList.vue";
import checkCustomerList from "@/views/checkManager/checkCustomerList.vue";
import recommender from "@/views/market/recommender";

export default {
  components: { singleImgUpload, checkApplyList, checkCustomerList,recommender },
  data() {
    return {
      dialog: {
        title: "添加筛查活动",
        visible: false
      },
      dialogTableVisible: false,
      formLabelWidth: "100px",
      list: [],
      rules: {},
      queryParam: { name: "" },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      formEdit: {
        id: "",
        name: "",
        beginTime: "",
        endTime: "",
        address: "",
        sponsor: "",
        contractTel: "",
        contracts: "",
        memo: "",
        imageUrl: "",
        date: [],
        maxApplyNum: "",
        projects: []
      },
      checkActivityStatus: [],
      projectOptions: [],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      // 报名列表
      id: "",
      checkApplyDialog: false,
      customerDialog: false,
      miniCodeUrl: "",
      recommenderVisable: false,
    };
  },
  created() {
    this.getList();
    this.ininDict();
  },
  watch: {
    "dialog.visible": {
      handler() {
        if (!this.dialog.visible) {
          this.formEdit.imageUrl = "";
        }
      },
      immediate: true
    }
  },
  methods: {
    async ininDict() {
      await get("checkactivity/checkActivityStatus").then(res => {
        this.checkActivityStatus = res.data.data;
      });
    },
    getStatusName(status) {
      for (let i = 0; i < this.checkActivityStatus.length; i++) {
        if (this.checkActivityStatus[i].key == status) {
          return this.checkActivityStatus[i].label;
        }
      }
      return "";
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    updateDialog(row) {
      this.dialog.visible = true;
      this.dialog.title = "修改";
      this.formEdit = {
        id: row.id,
        name: row.name,
        beginTime: row.beginTime,
        endTime: row.endTime,
        address: row.address,
        sponsor: row.sponsor,
        contractTel: row.contractTel,
        contracts: row.contracts,
        memo: row.memo,
        imageUrl: row.imageUrl,
        date: [],
        maxApplyNum: row.maxApplyNum,
        projects: []
      };
      if (row.projects) {
        this.formEdit.projects = row.projects.split(",");
      }
      if (row.beginTime && row.endTime) {
        this.formEdit.date = [row.beginTime, row.endTime];
      }
    },
    addDialog() {
      this.dialog.visible = true;
      this.dialog.title = "添加";
      this.resetForm("formEdit");
    },
    async getList() {
      await get("/checkactivity/pageCheckActivity", {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
        name: this.queryParam.name
      }).then(res => {
        this.list = res.data.data.list;
        this.page.total = Number.parseInt(res.data.data.total);
        this.page.currentPage = res.data.data.pageNum;
      });
    },
    dialogSubmit() {
      this.$refs.formEdit.validate(valid => {
        if (valid) {
          let parm = {
            id: this.formEdit.id,
            name: this.formEdit.name,
            beginTime: this.formEdit.beginTime,
            endTime: this.formEdit.endTime,
            address: this.formEdit.address,
            sponsor: this.formEdit.sponsor,
            contractTel: this.formEdit.contractTel,
            contracts: this.formEdit.contracts,
            memo: this.formEdit.memo,
            imageUrl: this.formEdit.imageUrl,
            projects: null,
            maxApplyNum: this.formEdit.maxApplyNum
          };
          if (this.formEdit.projects.length > 0) {
            parm.projects = this.formEdit.projects.join(",");
          }
          if (this.formEdit.date.length == 2) {
            parm.beginTime = this.formEdit.date[0];
            parm.endTime = this.formEdit.date[1];
          }
          if (!this.formEdit.id) {
            postXform("/checkactivity/addCheckActivity", parm).then(res => {
              this.dialog.visible = false;
              this.$message({ message: "添加成功", type: "success" });
              this.getList();
            });
          } else {
            postXform("/checkactivity/updateCheckActivity", parm).then(res => {
              this.dialog.visible = false;
              this.$message({ message: "修改成功", type: "success" });
              this.getList();
            });
          }
        }
      });
    },
    dialogCancel() {
      this.dialog.visible = false;
      this.resetForm("formEdit");
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
      // this.form = {
      //   id: "",
      //   name: "",
      //   beginTime: "",
      //   endTime: "",
      //   address: "",
      //   sponsor: "",
      //   contractTel: "",
      //   contracts: "",
      //   memo: "",
      //   imageUrl: "",
      //   maxApplyNum: ""
      // };
    },
    publish(row) {
      let status = 2;
      if (row.status == 2 || row.status == 3) {
        status = 5;
      }
      postXform("/checkactivity/changeStatus", {
        id: row.id,
        status: status
      }).then(res => {
        this.$message({ message: "修改成功", type: "success" });
        this.getList();
      });
    },
    checkApplyList(id) {
      this.id = id;
      this.checkApplyDialog = true;
    },
    customerList(id) {
      this.id = id;
      this.customerDialog = true;
    },
    miniCode(row) {
      get("checkactivity/miniCodeUrl", { id: row.id }).then(res => {
        this.miniCodeUrl = res.data.data;
        this.$nextTick(function() {
          // DOM 更新了
          document.getElementById("miniCodeUrl_store").click();
        });
      });
    },
    recommenderDialog(row) {
      this.recommenderVisable = true;
      this.$refs.recommender.initRecommender(row.id,"checkactivity");
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/checkActivity/checkActivity.scss";
</style>
